@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
	<div class="m-b">
		<a href="javascript:;" class="btn btn-default" onclick="history.back();"><i class="fa fa-angle-double-left"></i> 返回列表</a>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>完形填空 <i class="fa fa-angle-double-right m-l m-r"></i> 编辑</h5>
		</div>
		<div class="ibox-content">
			<form id="formEdit" method="post" class="form-horizontal" onsubmit="return false;">
				<div class="form-group">
					<label class="col-lg-2 control-label">文章：</label>
					<div class="col-lg-10">
						<div id="ueditor_topic" class="summernote">{!!$topic!!}</div>
					</div>
				</div>
				<div id="clozetestOptions">
					@foreach($rows as $i => $row)
						<div class="form-group">
							<input type="hidden" name="answer[]" value="{{$row->answer}}" />
							<label class="col-lg-2 control-label">
								@if($i > 0)
								<a href="javascript:;" class="label label-danger js-removecloze m-r"><i class="fa fa-trash"></i> 删除</a>
								@endif
								<strong>{{$row->topic}}</strong>
							</label>
							<div class="col-lg-10">
								<div class="row">
									@foreach($row->options as $key => $val)
									<div class="col-lg-3">
										<div class="input-group">
											<span class="input-group-btn">
												<button type="button" class="btn btn-{{$row->answer == $key ? 'primary' : 'white'}}">{{$key}}</button>
											</span>
											<input type="text" name="options[]" value="{{$val}}" placeholder="" class="form-control" />
										</div>
									</div>
									@endforeach
								</div>
							</div>
						</div>
					@endforeach
				</div>
				<div class="form-group m-t-n">
					<div class="col-lg-8 col-lg-offset-2">
						<a href="javascript:;" onclick="addClozeOption()">
							<i class="fa fa-plus"></i>
							增加选项
						</a>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<div class="col-lg-4 col-lg-offset-2">
						<input type="hidden" name="id" value="{{$id}}" />
						<button class="btn btn-warning btn-w-m" type="submit">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 完形填空选项 -->
<script id="tplClozetestOption" type="text/html">
	<div class="form-group">
		<input type="hidden" name="answer[]" value="A" />
		<label class="col-lg-2 control-label">
			<a href="javascript:;" class="label label-danger js-removecloze m-r"><i class="fa fa-trash"></i> 删除</a><strong>0</strong>
		</label>
		<div class="col-lg-10">
			<div class="row">
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-primary">A</button>
						</span>
						<input type="text" name="options[]" placeholder="点击左侧字母标记答案" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">B</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">C</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">D</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
			</div>
		</div>
	</div>
</script>
@endsection

@section('pageheader')
<link rel="stylesheet" href="{{asset('assets/iCheck/custom.css')}}" />
<link rel="stylesheet" href="{{asset('assets/summernote/summernote.css')}}" />
<link rel="stylesheet" href="{{asset('assets/summernote/summernote-bs3.css')}}" />
@endsection

@section('pagescript')
<script src="{{asset('assets/iCheck/icheck.min.js')}}"></script>
<script src="{{asset('assets/summernote/summernote.min.js')}}"></script>
<script>
	$("#side-menu li[rel='examtopic']").addClass("active")
	  .parents("ul").addClass("in").parents("li").addClass("active");

	$(function(){
		loadSummernote($('#ueditor_topic'));
	});

	// Summernote 编辑器上传图片
	var sendFile = function (file, editor, welEditable) {
		var data = new FormData();
		data.append("upfile", file, file.name || ('blob.' + file.type.substr('image/'.length)));
		$.ajax({
			data: data,
			type: "POST",
			dataType: "json",
			url: "{{url('ueditor?action=uploadimage')}}",
			cache: false,
			contentType: false,
			processData: false,
			success: function(data) {
				editor.insertImage(welEditable, data.url);
			}
		});
	};

	// 加载 Summernote 编辑器
	var loadSummernote = function(editor){
		editor.summernote({
			onImageUpload: function(files, editor, welEditable) {
				sendFile(files[0], editor, welEditable);
			}
		});
	};

	// 增加完形填空题目
	var addClozeOption = function(){
		$("#clozetestOptions").append(template("tplClozetestOption", null));
		$("#clozetestOptions").find(".control-label strong").each(function(i){
			$(this).text(i+1);
		});
	};

	// 设置完形填空题目答案
	$("#clozetestOptions").delegate(".btn", "click", function(){
		$(this).parents(".row").eq(0).find(".btn").each(function(){
			$(this).removeClass("btn-primary").addClass("btn-white");
		});
		$(this).removeClass("btn-white").addClass("btn-primary");
		$(this).parents(".form-group").eq(0).find("input[name='answer[]']").val($(this).text());
	});

	// 删除完形填空题目
	$("#clozetestOptions").delegate(".js-removecloze", "click", function(){
		$(this).parents(".form-group").eq(0).remove();
		$("#clozetestOptions").find(".control-label strong").each(function(i){
			$(this).text(i+1);
		});
	});

	$("#formEdit").on("submit", function(){
		var form = this, formdata = new FormData();
		formdata.append("topic", $("#ueditor_topic").code());
		$.each($(form).serializeArray(), function(i, item) {
      formdata.append(item.name, item.value);
    });
    $.ajax({
      url: "{{url('admin/exam/update')}}",
      type: "post",
      processData: false,
      contentType: false,
      dataType: "json",
      data: formdata,
      success:function(){
      	window.location.href = document.referrer;
      },
      error:failure
    });
		return false;
	});
</script>
@endsection
